<template>
 <div>
   <div class="messageService">
     <Tabs :option="tabsOption" @change="tabsChange"></Tabs>
     <div v-show="tabsType.prop===index" v-for="(item,index) in tabsOption.column" :key="index">
       <div v-if="tabsType.tabsCon1">
         <SimpleData :simpleData="simpleData" :option="msgOption"></SimpleData>
       </div>
     </div>
     <el-row class="mgt20">
       <el-col :span="8" class="txt-center"><el-button type="primary" class="btn btn-primary">变更</el-button></el-col>
       <el-col :span="8" class="txt-center"><el-button type="primary" class="btn btn-primary">关闭</el-button></el-col>
       <el-col :span="8" class="txt-center"><el-button type="primary" class="btn btn-primary">一键关闭</el-button></el-col>
     </el-row>
   </div>
 </div>
</template>

<script>
  import InformationShow from '@/components/common/informationShow'
  import ChildDropDown from '@/components/common/DropDownLoad'
  import Tabs from '@/components/common/Tabs'
  import SimpleData from '@/components/common/SimpleData'
  import { queryLoss } from '@/api/bankBiz/loss/loss'
  export default {
    name: "message-service",
    components: {
      Tabs,
      SimpleData
    },
    data () {
      return {
        tabsType: {},
        tabsOption: {
          column: [{
            label: '短信银行业务',
            prop: 0,
            tabsCon1: true
          }]
        },
        personalCustInfoData: {},
        custInfoFlag: true,
        simpleData: {
          'no': '卡/账号',
          'status': '签约状态',
          'type': '签约类型',
          'phone': '签约手机号',
          'date': '签约日期',
          'validity': '签约有效期',
          'chargePolicy': '收费政策'
        },
        msgOption: {
          column: [
            {
              'prop': 'no',
              'label': '卡/账号',
              'span': 8
            },
            {
              'prop': 'status',
              'label': '签约状态',
              'span': 8
            },
            {
              'prop': 'type',
              'label': '签约类型',
              'span': 8
            },
            {
              'prop': 'phone',
              'label': '签约手机号',
              'span': 8
            },
            {
              'prop': 'date',
              'label': '签约日期',
              'span': 8
            },
            {
              'prop': 'validity',
              'label': '签约有效期',
              'span': 8
            },
            {
              'prop': 'chargePolicy',
              'label': '收费政策',
              'span': 8
            }
          ]
        },
        dropDownLoadArray: [],
        checkListIsShow: false
      }
    },
    created () {
      // tab option
      this.tabsType = this.tabsOption.column[0]
      this.msgSearch()
    },
    methods: {
      tabsChange (column) {
        this.tabsType = column
        this.$message.success(JSON.stringify(column))
      },
      msgSearch () {
        return
        // 调接口
        let msgParams = {
          namespace: "Personal",
          key: "messageService"
        }
        queryLoss(msgParams).then((res) => {
          if(res.data.code == 200){
            this.simpleData = res.data.data
          }else{
            this.simpleData = {}
            window.globalUiKit.notify('提示', res.data.message, 'error')
          }
        })
      }
    }
  }
</script>

<style scoped>
  .mgt20{margin-top: 20px;}
</style>
